#blazor-error-ui {
	display: none !important;
	background: lightyellow;
	bottom: 0;
	box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
	display: none;
	left: 0;
	padding: 0.6rem 1.25rem 0.7rem 1.25rem;
	position: fixed;
	width: 100%;
	z-index: 1000;
}

	#blazor-error-ui .dismiss {
		cursor: pointer;
		position: absolute;
		right: 0.75rem;
		top: 0.5rem;
	}

.blazor-error-boundary {
	background: url() no-repeat 1rem/1.8rem, #b32121;
	padding: 1rem 1rem 1rem 3.7rem;
	color: white;
}

	.blazor-error-boundary::after {
		content: "An error has occurred."
	}

html,
body {
	height: 100%;
	margin: 0;
}

.box {
	display: flex;
	flex-flow: column;
	height: 100%;
}

.box .row {
	border: 1px dotted grey;
}

.box .row.header {
	flex: 0 1 auto;
	/* The above is shorthand for:
  flex-grow: 0,
  flex-shrink: 1,
  flex-basis: auto
  */
}

.box .row.content {
	flex: 1 1 auto;
}

.box .row.footer {
	flex: 0 1 40px;
}